<template>
  <div class="app-container">
    <!-- <el-input v-model="search.keywords" placeholder="keywords " style="width:300px" /> -->
    <!-- <el-button type="primary" @click="getJobList">Search</el-button> -->
    <el-button type="primary" @click="handleAdd">Add</el-button>

    <el-table :data="contactList" style="width: 100%;margin-top:30px;" border empty-text="Can't find record in table">
      <el-table-column align="header-center" label="Job ID" width="150">
        <template slot-scope="scope">{{ scope.row.value }}</template>
      </el-table-column>
      <el-table-column align="header-center" label="Tittle">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column align="center" label="Action" width="80">
        <template slot-scope="scope">
          <el-col :span="24">
            <el-link style="font-size:18px;" class="el-icon-delete icon-class" @click="handleDelete(scope)" />
          </el-col>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="search.page"
      :page-size="pagesize"
      style="margin-top:10px; float:right"
      @current-change="getPageList"
    /> -->

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType === 'edit' ? 'Edit Job' : 'New Job'"
    >
      <el-form :model="job" label-position="left">
        <el-form-item>
          <el-select v-model="job.wi_id" placeholder="Please Choose" style="width: 100%;" no-data-text="Can't find record">
            <el-option v-for="item in wiIdList" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="confirmRole">Confirm</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { baseAPI } from '@/utils/request'
import { getJobList, saveJob, deleteJob } from '@/api/hotel/detail'
import { getDictionary } from '@/api/user'

const defaultJob = {
  hotel_id: '',
  wi_id: ''
}

export default {
  data() {
    return {
      job: Object.assign({}, defaultJob),
      wiIdList: [],
      routes: [],
      contactList: [],
      dialogVisible: false,
      dialogType: 'new',
      checkStrictly: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      search: {
        keywords: '',
        hotel_id: 0,
        page: 1
      },
      total: 10,
      pagesize: 1
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  created() {
    // Mock: get all routes and roles list from server
    this.getRoutes()
    this.getJobList()
    this.getSelectList()
  },
  methods: {
    async getRoutes() {
      const res = await baseAPI.get('user/role/routes')
      this.serviceRoutes = res
      this.routes = res
    },
    async getSelectList() {
      // 流程
      await getDictionary({ dict_type: 'wi' }).then(result => {
        this.wiIdList = result
      })
    },
    getJobList(val) {
      if (val) {
        this.search.hotel_id = val
      }
      getDictionary({ dict_type: 'wi', hotel_id: this.search.hotel_id }).then(result => {
        this.contactList = result
      })
      // this.contactList = res.data
      // this.total = res.total
      // this.search.page = res.current_page
      // this.pagesize = res.per_page
    },
    async getPageList(value) {
      this.search.page = value
      const res = await getJobList(this.search)
      this.contactList = res.data
      this.total = res.total
      this.search.page = res.current_page
      this.pagesize = res.per_page
    },
    handleAdd() {
      this.job = Object.assign({}, defaultJob)
      if (this.$refs.tree) {
        this.$refs.tree.setCheckedNodes([])
      }
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    handleDelete({ $index, row }) {
      this.$confirm('Confirm to remove the role?', 'Warning', {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      })
        .then(async() => {
          await deleteJob({ id: row.value })
          this.contactList.splice($index, 1)
          this.$message({
            type: 'success',
            message: 'Delete succed!'
          })
        })
        .catch(err => {
          console.error(err)
        })
    },
    async confirmRole() {
      this.job.hotel_id = this.search.hotel_id
      await saveJob(this.job).then(async() => {
        const { hotel_id, wi_id } = this.job
        this.dialogVisible = false
        this.$notify({
          title: 'Success',
          dangerouslyUseHTMLString: true,
          message: `
              <div>hotel_id: ${hotel_id}</div>
              <div>wi_id: ${wi_id}</div>
            `,
          type: 'success'
        })
        // 更新列表
        this.getJobList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
